<template>
    <el-form ref="form" size="small" label-width="120px" :rules="rules" v-if="form">
        <el-form-item label="微服务名称">
            <el-input v-model="form.service_name" placeholder="名称，如：商城服务"></el-input>
        </el-form-item>
        <el-form-item label="微服务编码">
            <el-input v-model="form.service_code" placeholder="编码，如：mall"></el-input>
        </el-form-item>
        <el-form-item label="微服务描述">
            <el-input type="textarea" :rows="2" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="0px" style="text-align: center;margin-top: 30px;">
            <el-button size="default" type="primary"
                       @click="handleSubmitCreateGroup()"> 提交 </el-button>
            <el-button size="default" @click="handleCancel()"> 取消 </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import _ from 'lodash';

    const DEFAULT_FORM = {
        service_code: '',
        service_name: '',
        remark: '',
        app_id: -1
    }

    export default {
        props: [ 'currentData' ],
        data() {
            return {
                loading: false,
                actionType: 'view',     // createService | edit | view
                form: _.cloneDeep(DEFAULT_FORM),
                rules: {
                    service_code: [
                        { required: true, message: '请输入微服务编码', trigger: 'blur' }
                    ],
                    service_name: [
                        { required: true, message: '请输入微服务名称', trigger: 'blur' }
                    ]
                }
            }
        },
        components: {

        },
        created: function () {

        },
        mounted: function () {
            this.init();
        },
        watch: {
            'currentData': {
                deep: true,
                handler: function () {
                    this.init();
                }
            },
            'actionType'() {
                this.init();
            }
        },
        filters: {

        },
        computed: {

        },
        methods: {
            ...mapActions([

            ]),
            init() {
                let form = null;
                if(this.currentData && this.currentData.service_id) {
                    form = _.cloneDeep(this.currentData);
                } else {
                    form = _.defaults(DEFAULT_FORM);
                    form.app_id = _.get(this.currentData, 'id') || _.get(this.currentData, 'group_id')|| -1;
                }

                this.form = form;
            },
            async handleSubmitCreateGroup() {

                let data = _.cloneDeep(this.form);
                let id = _.get(data, 'service_id');
                let ret = null;

                if(id) {
                    ret = await this.$japi.services.update(id, data);
                } else {
                    ret = await this.$japi.services.create(data);
                }

                let tid = _.get(this.form, 'tid') || `S_${_.get(ret, 'service_id')}`;

                this.loading = false;

                if(ret) {
                    this.$message('操作成功！');
                    this.handleCancel(tid);
                }

                // this.refreshCurrentNode(tid);
            },
            handleCancel(tid) {
                // this.actionType = 'view';
                this.$emit('close', tid);
            },
        }
    }
</script>
